{extend name="layout/layout" /}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">
        <h3>消息详情</h3>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="history.back()">返回</button>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">消息内容</div>
                    <div class="layui-card-body">
                        <h3>{$detail.title|default=''}</h3>
                        <div style="margin: 20px 0; padding: 20px; background: #f8f8f8; border-radius: 5px;">
                            {$detail.content|default=''|raw}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">消息信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table">
                            <tbody>
                                <tr>
                                    <td>消息ID</td>
                                    <td>{$detail.id|default=''}</td>
                                </tr>
                                <tr>
                                    <td>发送者</td>
                                    <td>{$detail.sender_name|default='系统'}</td>
                                </tr>
                                <tr>
                                    <td>接收者</td>
                                    <td>{$detail.receiver_name|default=''}</td>
                                </tr>
                                <tr>
                                    <td>消息类型</td>
                                    <td>
                                        {switch $detail.type}
                                            {case 'system'}系统消息{/case}
                                            {case 'notice'}通知消息{/case}
                                            {case 'promotion'}推广消息{/case}
                                            {default}未知类型{/default}
                                        {/switch}
                                    </td>
                                </tr>
                                <tr>
                                    <td>发送时间</td>
                                    <td>{$detail.send_time|default=''}</td>
                                </tr>
                                <tr>
                                    <td>阅读状态</td>
                                    <td>
                                        {if $detail.is_read == 1}
                                            <span class="layui-badge layui-bg-green">已读</span>
                                        {else/}
                                            <span class="layui-badge">未读</span>
                                        {/if}
                                    </td>
                                </tr>
                                <tr>
                                    <td>阅读时间</td>
                                    <td>{$detail.read_time|default='未读'}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
layui.use(['element'], function(){
    var element = layui.element;
    
    console.log('消息详情页面已加载');
});
</script>
{/block}